<template>
  <div class="order-detail">
    <!-- 顶部导航栏 -->
    <van-nav-bar
      title="订单详情"
      left-arrow
      @click-left="onClickLeft"
    />

    <!-- 订单状态 -->
    <div class="status-section">
      <div class="status">{{ orderInfo.status }}</div>
      <div class="status-desc">商品正在准备中</div>
    </div>

    <!-- 收货地址 -->
    <div class="info-card address-card">
      <div class="card-title">
        <van-icon name="location-o" />
        <span>收货人</span>
      </div>
      <div class="address-content" v-if="orderInfo.address">
        <div class="contact-info">
          <span class="name">{{ orderInfo.address.receiver }}</span>
          <span class="phone">{{ orderInfo.address.phone }}</span>
        </div>
        <div class="address">{{ orderInfo.address.address }}</div>
      </div>
    </div>

    <!-- 商品信息 -->
    <div class="info-card">
      <div class="card-title">商品信息</div>
      <div class="product-list">
        <div class="product-item" v-for="item in orderInfo.items" :key="item._id">
          <div class="image-wrapper">
            <product-image
              :item-id="item.itemId"
              :alt="item.name"
            />
          </div>
          <div class="product-info">
            <div class="product-name">{{ item.name }}</div>
            <div class="product-quantity">x {{ item.quantity }}</div>
          </div>
          <div class="product-points">{{ item.points }}积分</div>
        </div>
      </div>
      <div class="price-info">
        <div class="price-item">
          <span>商品金额</span>
          <span>{{ orderInfo.points }}积分</span>
        </div>

        <div class="price-item total">
          <span>实付金额</span>
          <span>{{ orderInfo.points}}积分</span>
        </div>
      </div>
    </div>

    <!-- 订单信息 -->
    <div class="info-card">
      <div class="card-title">订单信息</div>
      <div class="order-info">
        <div class="info-item">
          <span class="label">订单编号：</span>
          <span class="value">{{ orderInfo._id }}</span>
          <span class="copy" @click="copyOrderId">复制</span>
        </div>
        <div class="info-item">
          <span class="label">下单时间：</span>
          <span class="value">{{ formatDate(orderInfo.createTime) }}</span>
        </div>
      </div>
    </div>

    <!-- 底部按钮 -->
    <div class="bottom-button" v-if="orderInfo.status === '待发货'">
      <van-button plain type="default" size="large" @click="cancelOrder">取消订单</van-button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { formatDate } from '../utils/date'
import { showToast } from 'vant'
import { getOrderDetail, cancelOrder as apiCancelOrder } from '../api/order'
import { apiGetProductDetail } from '../api/product'
import ProductImage from '../components/ProductImage.vue'

const router = useRouter()
const route = useRoute()
const orderId = route.params.id
const orderInfo = ref({})
const itemImages = ref({}) // 存储商品图片的映射

// 获取商品图片
const getImg = async (id) => {
  try {
    const res = await apiGetProductDetail(id)
    itemImages.value[id] = res.image
  } catch (err) {
    console.log(err)
    itemImages.value[id] = '' // 设置默认值或错误占位图
  }
}

// 获取订单详情
const getOrder = async () => {
  try {
    const res = await getOrderDetail(orderId)
    orderInfo.value = res
    // 获取所有商品的图片
    await Promise.all(orderInfo.value.items.map(item => getImg(item.itemId)))
  } catch (err) {
    console.error(err)
    showToast('获取订单详情失败')
  }
}

// 复制订单号
const copyOrderId = () => {
  const input = document.createElement('input')
  input.value = orderInfo.value._id
  document.body.appendChild(input)
  input.select()
  document.execCommand('copy')
  document.body.removeChild(input)
  showToast('复制成功')
}

// 取消订单
const cancelOrder = async () => {
  try {
    await apiCancelOrder(orderId)
    showToast('取消成功')
    router.back()
  } catch (err) {
    console.error(err)
    showToast('取消失败')
  }
}

// 返回上一页
const onClickLeft = () => {
  router.back()
}

onMounted(() => {
  getOrder()
})
</script>

<style scoped>
.order-detail {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 50px;
}

.status-section {
  background: linear-gradient(to right, #ff9b33, #ff6b5d);
  color: #fff;
  padding: 20px 16px;
}

.status {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 8px;
}

.status-desc {
  font-size: 14px;
  opacity: 0.9;
}

.info-card {
  background: #fff;
  margin: 12px;
  border-radius: 8px;
  padding: 16px;
}

.card-title {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.address-content {
  font-size: 14px;
}

.contact-info {
  margin-bottom: 8px;
}

.name {
  margin-right: 12px;
  font-weight: 500;
}

.phone {
  color: #666;
}

.address {
  color: #333;
  line-height: 1.4;
}

.product-list {
  margin-bottom: 16px;
}

.product-item {
  display: flex;
  align-items: center;
  padding: 0 ;
  border-bottom: 1px solid #f5f5f5;
}

.image-wrapper {
  width: 30vw;
  height: 30vw;
  margin-right: 12px;
}

.product-info {
  flex: 1;
}

.product-name {
  font-size: 14px;
  margin-bottom: 8px;
  line-height: 1.4;
}

.product-quantity {
  font-size: 14px;
  color: #666;
}

.product-points {
  font-size: 15px;
  color: #ff6b00;
  font-weight: 500;
}

.price-info {
  padding-top: 12px;
}

.price-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 14px;
  color: #666;
}

.price-item.total {
  color: #333;
  font-weight: 500;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f5f5f5;
}

.order-info .info-item {
  display: flex;
  margin-bottom: 8px;
  font-size: 14px;
  color: #666;
}

.info-item .label {
  width: 80px;
}

.info-item .value {
  flex: 1;
  color: #333;
}

.info-item .copy {
  color: #ff6b00;
  padding-left: 12px;
  cursor: pointer;
}

.bottom-button {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 8px 16px;
  background: #fff;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
}
</style> 